<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化后的标签页系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --text-color: #2b2d42;
            --bg-color: #f8f9fa;
            --card-color: #ffffff;
            --input-bg: #f1f3f5;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --social-divider-color: #dee2e6;
            --active-language-bg: rgba(67, 97, 238, 0.1);
            --control-btn-bg: rgba(0, 0, 0, 0.1);
            --control-btn-color: #2b2d42;
            --dropdown-gap: 10px;
            --toolbar-height: 42px; /* 统一的工具栏高度 */
            --tab-border-radius: 6px; /* 标签页圆角 */
            --toolbar-padding: 0 12px; /* 工具栏内边距 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .tab-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        /* 工具栏容器样式 */
        .tabs-header {
            position: relative;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            height: var(--toolbar-height);
            padding: var(--toolbar-padding);
            border-bottom: 1px solid #e9ecef; /* 添加底部边框 */
        }
        
        .tabs-scroll {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        
        .tabs-wrapper {
            display: flex;
            transition: transform 0.3s ease;
            height: 100%;
            position: relative;
        }
        
        .tab {
            position: relative;
            padding: 0 20px 0 12px; /* 调整padding使文字更好居中 */
            cursor: pointer;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: var(--tab-border-radius);
            margin-right: 5px;
            transition: all 0.2s ease;
            user-select: none;
            white-space: nowrap;
            flex-shrink: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 6px); /* 留出上下间距 */
            margin-top: 3px; /* 上边距 */
        }
        
        /* 文字容器，用于实现居中效果 */
        .tab-text {
            transition: all 0.2s ease;
            transform: translateX(0);
            position: relative;
            font-size: 13px; /* 调整字体大小 */
            color: #555; /* 默认文字颜色 */
        }
        
        /* 背景高亮指示器 */
        .tab-highlight {
            position: absolute;
            top: 3px;
            left: 0;
            width: 100px;
            height: calc(100% - 6px);
            background-color: #e6f7ff;
            border-radius: var(--tab-border-radius);
            border: 1px solid #91d5ff;
            z-index: 0;
            transform-origin: left center;
        }
        
        .tab:hover {
            background-color: #e9ecef;
        }
        
        .tab.active {
            font-weight: bold;
            background-color: transparent;
        }
        
        .tab.active .tab-text {
            color: var(--primary-color); /* 激活标签文字颜色 */
        }
        
        /* 关闭按钮样式优化 */
        .close-tab {
            position: relative;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            opacity: 0.5;
            transition: all 0.2s;
            font-size: 12px;
            color: #666;
        }
        
        .tab:hover .close-tab {
            opacity: 1;
        }
        
        .close-tab:hover {
            background-color: #e9ecef;
            color: #ff4d4f;
        }
        
        .tab-content {
            padding: 20px;
            min-height: 200px;
        }
        
        .content {
            display: none;
            opacity: 0;
            transform: translateY(10px);
        }
        
        .content.active {
            display: block;
        }
        
        /* 导航按钮样式优化 */
        .nav-button {
            width: 28px; /* 缩小按钮宽度 */
            height: 28px; /* 改为固定高度 */
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            color: #666;
            font-size: 14px;
            user-select: none;
            background-color: #f1f3f5;
            border-radius: 4px;
            margin: 0 2px;
            transition: all 0.2s;
        }
        
        .nav-button.visible {
            display: flex;
        }
        
        .nav-button:hover {
            background-color: #e1e3e5;
            color: var(--primary-color);
        }
        
        .nav-button.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            color: #999;
            background-color: transparent;
        }
        
        /* 添加按钮样式优化 */
        .add-tab {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--primary-color);
            font-size: 16px;
            background-color: #f1f3f5;
            border-radius: 4px;
            margin-left: 6px;
            transition: all 0.2s;
        }
        
        .add-tab:hover {
            background-color: #e1e3e5;
            color: var(--secondary-color);
        }

        /* 工具栏右侧功能区 */
        .toolbar-actions {
            display: flex;
            align-items: center;
            margin-left: 8px;
            padding-left: 8px;
            border-left: 1px solid #e1e3e5; /* 添加分隔线 */
        }

        /* 下拉菜单样式优化 */
        .dropdown {
            position: relative;
            display: inline-block;
            margin-left: 6px;
        }

        .control-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            background-color: #f1f3f5;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .control-btn:hover {
            background-color: #e1e3e5;
            color: var(--primary-color);
        }

        .dropdown-content {
            position: absolute;
            background-color: var(--card-color);
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            z-index: 100;
            overflow: hidden;
            right: 0;
            transform-origin: top right;
            transform: scale(0);
            opacity: 0;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            margin-top: var(--dropdown-gap);
            will-change: transform, opacity;
            border: 1px solid #e9ecef; /* 添加边框 */
        }

        .dropdown.active .dropdown-content {
            transform: scale(1);
            opacity: 1;
        }

        .dropdown-content a {
            color: var(--text-color);
            padding: 8px 12px;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 13px;
            transition: var(--transition);
        }

        .dropdown-content a:hover {
            background-color: var(--input-bg);
        }

        .dropdown-content a.active {
            background-color: var(--active-language-bg);
            color: var(--primary-color);
            cursor: default;
            pointer-events: none;
        }

        /* 语言选项图标样式 */
        .flag-icon {
            width: 16px;
            height: 12px;
            border-radius: 2px;
            margin-right: 8px;
            object-fit: cover;
        }

        /* 更多操作按钮 */
        .more-actions {
            margin-left: 6px;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <!-- 工具栏区域 -->
        <div class="tabs-header">
            <!-- 左侧导航按钮 -->
            <div class="nav-button prev disabled">‹</div>
            
            <!-- 标签页滚动区域 -->
            <div class="tabs-scroll">
                <div class="tabs-wrapper">
                    <div class="tab-highlight"></div>
                    <div class="tab active" data-tab="tab1">
                        <span class="tab-text">New Tab 1</span>
                        <span class="close-tab" data-tab="tab1">×</span>
                    </div>
                    <div class="tab" data-tab="tab2">
                        <span class="tab-text">New Tab 2</span>
                        <span class="close-tab" data-tab="tab2">×</span>
                    </div>
                    <div class="tab" data-tab="tab3">
                        <span class="tab-text">New Tab 3</span>
                        <span class="close-tab" data-tab="tab3">×</span>
                    </div>
                </div>
            </div>
            
            <!-- 右侧导航按钮 -->
            <div class="nav-button next">›</div>
            
            <!-- 添加标签按钮 -->
            <div class="add-tab">+</div>
            
            <!-- 工具栏右侧功能区 -->
            <div class="toolbar-actions">
                <!-- 语言切换下拉菜单 -->
                <div class="dropdown" id="language-dropdown">
                    <div class="control-btn" id="language-toggle">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="#" data-lang="zh" class="active">
                            <img src="https://flagcdn.com/w20/cn.png" class="flag-icon" alt="中文"> 中文
                        </a>
                        <a href="#" data-lang="en">
                            <img src="https://flagcdn.com/w20/us.png" class="flag-icon" alt="English"> English
                        </a>
                        <a href="#" data-lang="ja">
                            <img src="https://flagcdn.com/w20/jp.png" class="flag-icon" alt="日本語"> 日本語
                        </a>
                        <a href="#" data-lang="es">
                            <img src="https://flagcdn.com/w20/es.png" class="flag-icon" alt="Español"> Español
                        </a>
                    </div>
                </div>
                
                <!-- 更多操作按钮 -->
                <div class="dropdown more-actions">
                    <div class="control-btn">
                        <i class="fas fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="#"><i class="fas fa-cog" style="margin-right:8px;"></i> 设置</a>
                        <a href="#"><i class="fas fa-download" style="margin-right:8px;"></i> 导出</a>
                        <a href="#"><i class="fas fa-trash-alt" style="margin-right:8px;"></i> 清空</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="tab-content">
            <div class="content active" id="tab1">
                <h3>New Tab Content 1</h3>
                <p>This is the content for the first New Tab.</p>
            </div>
            <div class="content" id="tab2">
                <h3>New Tab Content 2</h3>
                <p>This is the content for the second New Tab.</p>
            </div>
            <div class="content" id="tab3">
                <h3>New Tab Content 3</h3>
                <p>This is the content for the third New Tab.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabsContainer = document.querySelector('.tabs-wrapper');
            const tabsScroll = document.querySelector('.tabs-scroll');
            const tabs = document.querySelectorAll('.tab');
            const closeButtons = document.querySelectorAll('.close-tab');
            const prevButton = document.querySelector('.nav-button.prev');
            const nextButton = document.querySelector('.nav-button.next');
            const addButton = document.querySelector('.add-tab');
            const highlight = document.querySelector('.tab-highlight');
            let currentTab = document.querySelector('.tab.active');
            let currentContent = document.querySelector('.content.active');
            let currentPosition = 0;
            let wrapperWidth = tabsScroll.offsetWidth;
            let tabsWidth = tabsContainer.scrollWidth;
            let tabCount = tabs.length;
            
            // 初始化高亮指示器位置
            function initHighlight() {
                const activeTab = document.querySelector('.tab.active');
                if (!activeTab) return;
                
                const tabRect = activeTab.getBoundingClientRect();
                const containerRect = tabsContainer.getBoundingClientRect();
                
                gsap.set(highlight, {
                    x: tabRect.left - containerRect.left,
                    width: tabRect.width,
                    backgroundColor: '#e6f7ff',
                    borderColor: '#91d5ff'
                });
            }
            
            // 初始化第一个内容区域的动画
            gsap.fromTo(currentContent, 
                { opacity: 0, y: 10 },
                { opacity: 1, y: 0, duration: 0.3 }
            );
            
            // 初始化高亮指示器
            initHighlight();
            
            // 检查是否需要显示导航按钮
            function checkNavButtons() {
                tabsWidth = tabsContainer.scrollWidth;
                wrapperWidth = tabsScroll.offsetWidth;
                
                if (tabsWidth > wrapperWidth) {
                    prevButton.classList.add('visible');
                    nextButton.classList.add('visible');
                } else {
                    prevButton.classList.remove('visible');
                    nextButton.classList.remove('visible');
                    currentPosition = 0;
                    tabsContainer.style.transform = 'translateX(0)';
                }
                
                updateNavButtons();
            }
            
            // 更新导航按钮状态
            function updateNavButtons() {
                prevButton.classList.toggle('disabled', currentPosition >= 0);
                nextButton.classList.toggle('disabled', 
                    currentPosition <= -(tabsWidth - wrapperWidth));
            }
            
            // 切换标签页函数
            function switchTab(newTab) {
                if (newTab === currentTab) return;
                
                const tabId = newTab.getAttribute('data-tab');
                const newContent = document.getElementById(tabId);
                const oldTab = currentTab;
                
                // 获取标签位置和尺寸
                const newTabRect = newTab.getBoundingClientRect();
                const containerRect = tabsContainer.getBoundingClientRect();
                const newX = newTabRect.left - containerRect.left;
                const newWidth = newTabRect.width;
                
                // 动画时间线
                const tl = gsap.timeline();
                
                // 1. 淡出当前内容
                tl.to(currentContent, {
                    opacity: 0,
                    y: -10,
                    duration: 0.2,
                    ease: "power1.out",
                    onComplete: () => {
                        currentContent.classList.remove('active');
                    }
                });
                
                // 2. 切换标签活动状态和高亮动画
                tl.add(() => {
                    oldTab.classList.remove('active');
                    newTab.classList.add('active');
                    currentTab = newTab;
                    
                    newContent.classList.add('active');
                    currentContent = newContent;
                    
                    // 高亮动画效果
                    gsap.to(highlight, {
                        x: newX,
                        width: newWidth,
                        duration: 0.3,
                        ease: "elastic.out(1, 0.5)"
                    });
                    
                    // 确保活动标签可见
                    ensureTabVisible(newTab);
                }, "-=0.1");
                
                // 3. 淡入新内容
                tl.fromTo(newContent, 
                    { opacity: 0, y: 10 },
                    { opacity: 1, y: 0, duration: 0.3, ease: "power1.in" }
                );
            }
            
            // 确保标签可见
            function ensureTabVisible(tab) {
                const tabRect = tab.getBoundingClientRect();
                const wrapperRect = tabsScroll.getBoundingClientRect();
                
                if (tabRect.left < wrapperRect.left) {
                    // 标签在左侧不可见
                    const diff = wrapperRect.left - tabRect.left;
                    currentPosition += diff;
                    tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                } else if (tabRect.right > wrapperRect.right) {
                    // 标签在右侧不可见
                    const diff = tabRect.right - wrapperRect.right;
                    currentPosition -= diff;
                    tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                }
                
                updateNavButtons();
            }
            
            // 导航按钮点击事件
            prevButton.addEventListener('click', function() {
                if (this.classList.contains('disabled')) return;
                
                const moveBy = Math.min(wrapperWidth * 0.8, -currentPosition);
                currentPosition += moveBy;
                tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                updateNavButtons();
            });
            
            nextButton.addEventListener('click', function() {
                if (this.classList.contains('disabled')) return;
                
                const maxScroll = tabsWidth - wrapperWidth;
                const moveBy = Math.min(wrapperWidth * 0.8, maxScroll + currentPosition);
                currentPosition -= moveBy;
                tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                updateNavButtons();
            });
            
            // 标签点击事件
            function setupTabClick(tab) {
                tab.addEventListener('click', function(e) {
                    // 如果点击的是关闭按钮，则不切换标签
                    if (e.target.classList.contains('close-tab')) return;
                    switchTab(this);
                });
            }
            
            // 关闭标签事件
            function setupCloseButton(button) {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const tabId = this.getAttribute('data-tab');
                    const tabToClose = document.querySelector(`.tab[data-tab="${tabId}"]`);
                    const contentToClose = document.getElementById(tabId);
                    
                    // 如果关闭的是当前激活的标签
                    if (tabToClose.classList.contains('active')) {
                        // 找到下一个可用的标签
                        const nextTab = tabToClose.nextElementSibling || tabToClose.previousElementSibling;
                        if (nextTab) {
                            switchTab(nextTab);
                        }
                    }
                    
                    // 移除标签和内容
                    tabToClose.remove();
                    contentToClose.remove();
                    
                    // 更新高亮指示器位置
                    setTimeout(() => {
                        initHighlight();
                        checkNavButtons();
                    }, 0);
                });
            }
            
            // 添加新标签
            addButton.addEventListener('click', function() {
                tabCount++;
                const tabId = `tab${tabCount}`;
                
                // 创建新标签
                const newTab = document.createElement('div');
                newTab.className = 'tab';
                newTab.setAttribute('data-tab', tabId);
                newTab.innerHTML = `
                    <span class="tab-text">New Tab ${tabCount}</span>
                    <span class="close-tab" data-tab="${tabId}">×</span>
                `;
                
                // 创建新内容
                const newContent = document.createElement('div');
                newContent.className = 'content';
                newContent.id = tabId;
                newContent.innerHTML = `
                    <h3>New Tab Content ${tabCount}</h3>
                    <p>This is the content for the new tab.</p>
                `;
                
                // 添加到DOM
                tabsContainer.appendChild(newTab);
                document.querySelector('.tab-content').appendChild(newContent);
                
                // 设置事件监听
                setupTabClick(newTab);
                setupCloseButton(newTab.querySelector('.close-tab'));
                
                // 切换到新标签
                switchTab(newTab);
                
                // 检查是否需要显示导航按钮
                setTimeout(checkNavButtons, 0);
            });
            
            // 窗口大小改变时检查
            window.addEventListener('resize', function() {
                checkNavButtons();
                initHighlight();
            });
            
            // 初始化现有标签和关闭按钮
            tabs.forEach(tab => setupTabClick(tab));
            closeButtons.forEach(button => setupCloseButton(button));
            
            // 初始检查导航按钮
            checkNavButtons();
        });

        // 语言切换功能
        const languageDropdown = document.getElementById('language-dropdown');
        const languageToggle = document.getElementById('language-toggle');
        const dropdownContent = languageDropdown.querySelector('.dropdown-content');
        let currentLanguage = 'zh'; // 默认语言设置为中文

        // 点击语言图标切换下拉菜单
        languageToggle.addEventListener('click', (e) => {
            e.stopPropagation();
            languageDropdown.classList.toggle('active');
            
            // 关闭其他打开的下拉菜单
            document.querySelectorAll('.dropdown').forEach(dropdown => {
                if (dropdown !== languageDropdown && dropdown.classList.contains('active')) {
                    dropdown.classList.remove('active');
                }
            });
        });

        // 点击语言选项
        dropdownContent.querySelectorAll('a').forEach(item => {
            item.addEventListener('click', (e) => {
                const lang = item.getAttribute('data-lang');
                if (lang === currentLanguage) {
                    e.preventDefault();
                    return;
                }

                // 更新当前语言
                setActiveLanguage(lang);
                console.log('切换语言:', lang);
                // 这里可以添加实际的语言切换逻辑
                languageDropdown.classList.remove('active');
            });
        });

        // 设置激活语言
        function setActiveLanguage(lang) {
            currentLanguage = lang;

            // 更新所有语言选项状态
            dropdownContent.querySelectorAll('a').forEach(item => {
                if (item.getAttribute('data-lang') === lang) {
                    item.classList.add('active');
                    // 更新语言图标显示
                    const flagIcon = item.querySelector('.flag-icon').src;
                    languageToggle.innerHTML = `<img src="${flagIcon}" style="width:16px;height:12px;border-radius:2px;">`;
                } else {
                    item.classList.remove('active');
                }
            });
        }

        // 初始化设置默认语言
        setActiveLanguage(currentLanguage);

        // 点击页面其他位置关闭下拉菜单
        document.addEventListener('click', (e) => {
            document.querySelectorAll('.dropdown').forEach(dropdown => {
                if (!dropdown.contains(e.target)) {
                    dropdown.classList.remove('active');
                }
            });
        });

        // 更多操作下拉菜单交互
        const moreActionsDropdown = document.querySelector('.more-actions');
        const moreActionsToggle = moreActionsDropdown.querySelector('.control-btn');

        moreActionsToggle.addEventListener('click', (e) => {
            e.stopPropagation();
            moreActionsDropdown.classList.toggle('active');
            
            // 关闭其他打开的下拉菜单
            document.querySelectorAll('.dropdown').forEach(dropdown => {
                if (dropdown !== moreActionsDropdown && dropdown.classList.contains('active')) {
                    dropdown.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>
